<style lang="less">
.bookshelf {
  // display:flex;
  // justify-content: center;
  padding: 20px 10px;

  .top {
    width: 100%;
    height: 40px;
    text-align:center;
    display:flex;
    justify-content:space-between;
  }

  ul {
    display: flex;
    margin-top: 10px;
    flex-wrap:wrap;
    justify-content:space-around;

    li {
      margin: 15px 0px;

      img {
        width: 100px;
        height: 140px;
      }
      p{
        margin-top: 5px;
      }
    }
  }
}
</style>

<template>
  <div class="bookshelf">
    <div class="top">
      <h3>书架</h3>
      <p>管理</p>
    </div>
    <div>
      <ul >
        <li v-for="item in 9" :key="item.id">
          <router-link to="/index">
            <img src="../../public/image/test.jpg" alt="">
            <p>官海浮沉</p>
          </router-link>
        </li>
  
  
      </ul>
    </div>
  </div>
</template>

<script>

import { Dialog } from 'vant';

export default {

  data() {
    return {
      items: [

      ]
    }
  },

// 路由拦截
  beforeRouteEnter(to, from, next) {

    let token = localStorage.getItem("AUTO_TOKEN");

    if (token) {
      next(true);
    }
    else {
      Dialog.confirm({
        title: '您还没登录,无法查看书架',
        message: '要移步到登录页面吗?',
      })
        .then(() => {

          next({ path: '/login' })
        })
        .catch(() => {

          next(false);
        });
    }
  },
}
</script>
